<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>	
	<link rel="stylesheet" type="text/css" href="./1/index.css">
<style>
    *{
	margin: 0;
	padding: 0;
/*	background: black;*/
}
html,body{
	overflow: auto;
}
::-webkit-scrollbar{
	display: none;
}
html{
	-ms-overflow-style: none;
}
/*导航*/
.doss{
	width: 100%;
	height: 70px;
	background: #dfe3e9db;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	justify-content: space-around;
	/*margin: 0 auto;*/
	position: fixed;
	top: 0;
	z-index: 5;
}
.A{
	height: 30px;
	display: flex;
	align-items: center;
	padding:30px 30px;
	position: absolute;
	left: 100px;
	top: -10px;
	margin: 0 auto;
}
.A span{
	font-size: 14px;
	display: flex;
	margin: 15px;
}
.logo{
	width:40px;
	height: 40px;
}
.login{
	width: 60px;
	height: 30px;
	background: #07a2a4;
	position: absolute;
	right: -400px;
	top: 30px;
	border-radius: 10%;
	padding-left:20px;

}
.A span:hover{
	color: skyblue;
	cursor: pointer;
}
.login:hover{
	background: #69fdff;
}
/*图片*/
.main{
	width: 1699.33px;
	height: 360px;
}
.main img{
	width: 100%;
	height: 100%
}
/*内容*/
.content{
	width: 100%;
	margin: 0 auto;
	line-height: 65px;
	background: #ffffff;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.box{
	width: 28px;
	height: 65px;
	display: flex;
	margin-left: 260px;
	white-space: nowrap;
}
.box span{
	font-size: 14px;
	color: #367ff2;
}
.box span:hover{
	cursor: pointer;
}
.box2{
	width: 14px;
	height: 65px;
	display: flex;
}
.box2 span{
	color: #666;
}
.box3{
	width: 560px;
	height: 65px;
	display: flex;
}
.box3 span{
	font-size: 14px;
	color: #666;
}
.land{
	width: 100%;
	height: 1300px;
	background: #f6f6f6;
}
/*搜索框*/
.pont{
	width: 700px;
	height: 32px;
	display: flex;
}
.input{
    padding-left: 30px;
	box-sizing: border-box;
	outline: none;
	width: 240px;
	height: 32px;
	margin-top: 40px;
	margin-left: 260px;
	border: 1px solid #c0c4cc;
	border-radius: 5px;
	white-space: nowrap;
}
.input span{
	font-size: 12px;
	color: #c0c4cc;
}
.input span:hover{
	cursor: pointer;
}
.inpur{
	width: 76px;
	height: 32px;
	background: #f9eeee;
	border-radius: 5px;
	border: 1px solid #e6b9b9;
	display: flex;
	margin-left: 10px;
	margin-top: 40px;
    box-sizing: border-box;
    padding-left: 17px;
    padding-top: 6px;
}
.inpur span{
	color: #c05050;
	font-size: 12px;

}
.inpur:hover{
	background:  #c05050;
	color: #ffffff;
	cursor: pointer;
}
.inpur span:hover{
	color: #ffffff;
}
/*xinwen*/
.xwen{
	width: 1220px;
	height: 1020px;
	display: flex;
	flex-direction: column;
	margin-top: 80px;
	margin-left: 260px;
}
.xone{
	width: 1200px;
	height: 230px;
	display: flex;
	flex-direction: row;
	border: 1px solid #c0c4cc;
}
.poiter{
	width: 390px;
	height: 230px;
}
.poiter img{
	width: 100%;
	height: 100%
}
.zener{
	width: 810px;
	height: 228px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
}
.xier{
	width: 760px;
	height: 26px;
	display: flex;
	white-space: nowrap;
	margin-top: 20px;
	margin-left: 30px;
}
.xier span{
	font-size: 16px;
	color: #333333;
}
.time{
	width: 760px;
	height: 23px;
	display: flex;
	margin-top: 20px;
	margin-left: 30px;
	color: #999;
}
.time span{
	color: #367ff2;
}
.book{
	width: 760px;
	height: 23px;
	margin-top: 10px;
	margin-left: 28px;
	color: #999;
	display: flex;
}
.book span{
	color: #367ff2;
}
.xixier{
	width: 607px;
	height: 20px;
	display: flex;
	white-space: nowrap;
	margin-top: 30px;
	margin-left: 30px;
}
.xixier span{
	color: #666;
}
.liea{
	width: 97px;
	height: 28px;
	border-radius: 5px;
	background: #367ff2cc;
	margin-top: 15px;
	margin-left: 695px;
}
.liea span{
	font-size: 12px;
	color: #ffffff;
	margin-top: 4px;
	margin-left: 13px;
}
.xtwo{
	width: 1200px;
	height: 230px;
	display: flex;
	flex-direction: row;
	border: 1px solid #c0c4cc;
	margin-top: 30px;
}
.poiter1{
	width: 390px;
	height: 230px;
}
.poiter1 img{
	width: 100%;
	height: 100%
}
.zener1{
	width: 810px;
	height: 228px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
}
.xier1{
	width: 760px;
	height: 26px;
	display: flex;
	white-space: nowrap;
	margin-top: 20px;
	margin-left: 30px;
}
.xier1 span{
	font-size: 16px;
	color: #333333;
}
.time1{
	width: 760px;
	height: 23px;
	display: flex;
	margin-top: 20px;
	margin-left: 30px;
	color: #999;
}
.time1 span{
	color: #367ff2;
}
.book1{
	width: 760px;
	height: 23px;
	margin-top: 10px;
	margin-left: 28px;
	color: #999;
	display: flex;
}
.book1 span{
	color: #367ff2;
}
.xixier1{
	width: 607px;
	height: 20px;
	display: flex;
	white-space: nowrap;
	margin-top: 30px;
	margin-left: 30px;
}
.xixier1 span{
	color: #666;
}
.liea1{
	width: 97px;
	height: 28px;
	border-radius: 5px;
	background: #367ff2cc;
	margin-top: 15px;
	margin-left: 695px;
}
.liea1 span{
	font-size: 12px;
	color: #ffffff;
	margin-top: 4px;
	margin-left: 13px;
}
/*页码*/
.boxx{
	margin-top: 60px;
	margin-left: 480px;
	width: 1699.33px;
	height: 32.79px;
	display: flex;
	justify-content: row;
	white-space: nowrap;
}
.boxx1{
	width: 57px;
	height: 28px;
}
.boxx1 span{
	font-size: 	13px;
	margin-top: 5px;
	color: #606266;
}
.boxx2{
	width: 100px;
	height: 28px;
	margin-left: 20px;
	border-radius: 5px;
	border: 1px solid #dcdfe6;
	white-space: nowrap;
	margin-top: 2px;
}
.boxx2 span1{
	font-size: 13px;
	color: #dcdfe6;
	margin-left: 15px;
    align-items: center;
}
.boxx2 span1:hover{
	cursor: pointer;
}
.boxx2 span2{
	font-size: 13px;
	color: #606266;
	margin-left: 25px;
	align-items: center;
}
.boxx2 span2:hover{
	cursor: pointer;
}
.boxx3{
	width: 30px;
	height: 28px;
	margin-left: 30px;
	margin-top: 4px;
}
.boxx3 span{
	color: #dcdfe6;
}
.boxx3 span:hover{
	cursor: no-drop;
}
.boxx4{
	width: 323px;
	height: 28px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    white-space: nowrap;
    margin-top: 3px;
}
.boxx5{
	background: #008acd;
	color: #ffffff;
	font-size: 13px;
	width: 30px;
	height: 28px;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
}
.boxx5 span{
	margin-left: 12px;
	margin-top: 3px;
}
.boxx5 span:hover{
	cursor: pointer;
}
.boxx6{
	width: 30px;
	height: 28px;
}
.boxx6 span{
	color: #606266;
}
.boxx6 span:hover{
	color: #008acd;
	cursor: pointer;
}
.boxx3 span1{
	color: #606266;
	font-size: 13px;
}
.boxx3 span1:hover{
	cursor: pointer;
}
.boxx7{
	width: 120px;
	height: 28px;
	margin-top: 3px;
	white-space: nowrap;
	display: flex;
	flex-direction: row;
}
.boxx7 span{
	color: #606266;
	font-size: 13px;
}
.boxx8{
	width: 46px;
	height: 26px;
	border-radius: 5px;
	border: 1px solid #dcdfe6;
}
.boxx8 span{
	font-size: 13px;
	color: #606266;
	margin-left: 26px;
}
/*底部*/
.boxr{
	width: 1700px;
	height: 325px;
	background: url("../img/bj2.jpg") no-repeat;
	display: flex;
	flex-direction: column;
}
.dahe{
	width: 1200px;
	height: 225px;
	display: flex;
	flex-direction: row;
}
.zi{
	width: 550px;
	height: 146px;
	display: flex;
	margin-left: 240px;
	margin-top: 60px;
	flex-direction: column;
}
.da{
	width: 350px;
	height: 23px;
	display: flex;
    justify-content: space-between;
}
.da span{
	font-size: 14px;
	color: #F5f5f5;
}
.da span:hover{
	cursor: pointer;
}
.xiao{
	width: 350px;
	height: 14px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
}
.xiao span{
	font-size: 12px;
	color: #f5f5f5;
}
.xiao span:hover{
	cursor: pointer;
}
.lian{
	width: 350px;
	height: 150px;
	display: flex;
	margin-top: 60px;
	margin-left: 200px;
	flex-direction: column;
}
.cu{
	width: 300px;
	height: 23px;
	display: flex;
	justify-content: flex-start;
}
.cu span{
	font-size: 14px;
	color: #f5f5f5;
}
.cu span:hover{
	cursor: pointer;
}
.xi{
	width: 300px;
	height: 36px;
	margin-top: 20px;
	display: flex;
	justify-content: flex-start;
}
.xi span{
	font-size: 12px;
	color: #f5f5f5;
}
.xi span:hover{
	cursor: pointer;
}
.erm{
	width: 200px;
	height: 190px;
	display: flex;
	flex-direction: column;
	margin-top: 60px;
	margin-left: 200px;
}
.pier{
	width: 150px;
	height: 150px;
}
.pier img{
	width: 100%;
	height: 100%;
}
.zier{
	margin-top: 10px;
	width: 150px;
	height: 20px;
	display: flex;
	justify-content: space-between;
}
.zier span{
	font-size: 12px;
	color: #f5f5f5;
}
.bean{
	width: 550px;
	height: 14px;
	margin-top: 40px;
	margin-left: 590px;
	display: flex;
}
.bean span{
	font-size: 12px;
	color: #f5f5f5;
	white-space: nowrap;
}
</style>
</head>
<body>
		<!-- 导航 -->
<div class="doss">          
      <div class="A">
      <img class="logo" src="https://www.jqscsfq.com/storage/2022-05-12/d399f3a3666cdbffd5f836329bf33501627ca85484a95.png" alt="">      
        <span>首页</span>
        <span>园区招商</span>
        <span>创新政策</span>
        <span>双创活动</span>
        <span>投融资服务</span>
        <span>供需平台</span>
        <span>专家服务</span>
        <span>智慧党建</span>
        <span>新闻资讯</span>
        <span class="gaun">关于我们</span>    
        <div class="login">
          登录
        </div>
      </div>
    </div>
<!-- 图片 -->
	<div class="main">
	  <img src="./img/xw.jpg">
	</div>
<!-- 内容 -->
    <div class="content">
      <div class="box">
        <span>首页</span>
      </div>
      <div class="box2">
        <span>></span>
      </div>
      <div class="box3">
        <span>新闻资讯</span>
      </div>
    </div>
    <div class="land">
<!-- 搜索框 -->
      <div class="pont">
        <div class="input">
          <span>新闻类型</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
          <span>﹀</span>
        </div>
        <div class="inpur">
          <span>⊗ 重置</span>
        </div>
      </div>
<!-- 新闻 -->
      <div class="xwen">
        <div class="xone">
          <div class="poiter"><img src="./img/xh.jpg"></div>
          <div class="zener">
            <div class="xier">
              <span>智创未来·科工融合，新华小学335名学生走进园区开展科技研学活动!</span>
            </div>
            <div class="time"><span>◷</span>&nbsp2025-10-11</div>
            <div class="book"><span>🔖</span>动态分类</div>
            <div class="xixier">
              <span>智创未来·科工融合，新华小学335名学生走进园区开展科技研学活动!</span>
            </div>
            <div class="liea">
              <span>📑 了解详情</span>
            </div>
          </div>
        </div>
        <div class="xtwo">
          <div class="poiter1"><img src="./img/jq.png"></div>
          <div class="zener1">
            <div class="xier1">
              <span>红领蓝海丨【人才云学院】中华民族共同体的形成和发展是人心所向、大势所趋、历史必然</span>
            </div>
            <div class="time1"><span>◷</span>&nbsp2025-10-11</div>
            <div class="book1"><span>🔖</span>动态分类</div>
            <div class="xixier1">
              <span>【人才云学院】中华民族共同体的形成和发展是人心所向、大势所趋、历史必然</span>
            </div>
            <div class="liea1">
              <span>📑 了解详情</span>
            </div>
          </div>
        </div>
        <div class="xtwo">
          <div class="poiter1"><img src="./img/fj.jpg"></div>
          <div class="zener1">
            <div class="xier1">
              <span>星智园、荟智园2025年国庆节放假通知及值班表</span>
            </div>
            <div class="time1"><span>◷</span>&nbsp2025-9-30</div>
            <div class="book1"><span>🔖</span>动态分类</div>
            <div class="xixier1">
              <span>国庆节放假通知</span>
            </div>
            <div class="liea1">
              <span>📑 了解详情</span>
            </div>
          </div>
        </div>
        <div class="xtwo">
          <div class="poiter1"><img src="./img/fj.jpg"></div>
          <div class="zener1">
            <div class="xier1">
              <span>数智园2025年国庆节放假通知及值班表</span>
            </div>
            <div class="time1"><span>◷</span>&nbsp2025-10-11</div>
            <div class="book1"><span>🔖</span>动态分类</div>
            <div class="xixier1">
              <span>国 庆 节 放 假 通 知</span>
            </div>
            <div class="liea1">
              <span>📑 了解详情</span>
            </div>
          </div>
        </div>
      </div>
<!-- 页码 -->
      <div class="boxx">
        <div class="boxx1">
          <span>共801条</span>
        </div>
        <div class="boxx2">
          <span2>4条/页</span2><span1>﹀</span1>
        </div>
        <div class="boxx3">
          <span>＜</span>
        </div>
        <div class="boxx4">
          <div class="boxx5"><span>1</span></div>
          <div class="boxx6"><span>2</span></div>
          <div class="boxx6"><span>3</span> </div>
          <div class="boxx6"><span>4</span></div>
          <div class="boxx6"><span>5</span></div>
          <div class="boxx6"><span>6</span></div>
          <div class="boxx6"><span>⋯</span></div>
          <div class="boxx6"><span>201</span></div>
        </div>
        <div class="boxx3"><span1>＞</span1></div>
        <div class="boxx7">
          <span>前往</span><div class="boxx8"><span>1</span></div><span>页</span>
        </div>
      </div>
    </div>
<!-- 底部 -->
    <div class="boxr">
    <div class="dahe">
      <div class="zi">
        <div class="da">
          <span><b>政策支持</b></span>
          <span><b>创客支持</b></span>
          <span><b>资源服务</b></span>
          <span><b>关于我们</b></span>
        </div>
        <div class="xiao">
          <span>园区招商</span>
          <span>供需平台</span>
          <span>专家服务</span>
          <span>新闻资讯</span>
        </div>
        <div class="xiao">
          <span>创新政策</span>
          <span>投融资服务</span>
          <span>优质项目</span>
          <span>关于我们</span>
        </div>
        <div class="xiao">
          <span>双创活动</span>
        </div>
      </div>
      <div class="lian">
        <div class="cu">
          <span><b>联系我们</b></span>
        </div>
        <div class="xi">
          <span>联系方式：0471-3985607</span>
        </div>
        <div class="xi">
          <span>合作邮箱：jpshuangchuang@163.com</span>
        </div>
        <div class="xi">
          <span>地址：内蒙古自治区呼和浩特市赛罕区阿拉坦大街1号</span>
        </div>
      </div>
      <div class="erm">
        <div class="pier">
          <img src="./img/ma.jpeg">
        </div>
        <div class="zier">
          <span>金桥“双创”示范区公众号</span>
        </div>
      </div>
    </div>
    <div class="bean">
      <span>版权所有：内蒙古金桥数智产业发展有限责任公司&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp备案号：蒙ICP备2023003874号</span>
    </div>
  </div>
  <script>
    axios({
        method:'get',
        url:'https://www.jqscsfq.com/api/web/news?is_web=1&pageSize=4&page=2'
    }).then(res=>{
        setdom(res.data.data)
        console.log(res.data);
        
    })
    //渲染dom
    function setdom(arr) {
        arr.forEach(item=>{
            $('ul').append(
                <li>
                   <img src=""> 
                    
                </li>
            )
        })
    }


  </script>
</body>
</html>